<template>
  <div class="container">
    <el-page-header @back="goBack" title="曝光台" style="padding: 10px 20px" />
    <!--    数据展示区域-->
    <el-form :mode="exposeForm" label-width="120px">
      <el-form-item label="标签">
        <el-tag size="small" v-for="item in exposeForm.tags" :key="item.id">{{
          item.name
        }}</el-tag>
      </el-form-item>
      <el-form-item label="发布时间">
        <span>{{ dateFormat(exposeForm.createdTime) }}</span>
      </el-form-item>
      <el-form-item label="内容">
        <MyEditor ref="editor" :value="exposeForm.content"></MyEditor>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="danger" size="small" @click="goBack">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import moment from "moment";
//引入富文本组件
import MyEditor from "../../../components/MyEditor";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { exposeInfo } from "@/api/message/expose";
const router = useRouter();
const route = useRoute();
const exposeId = ref("");
function goBack() {
  router.push({ name: "expose" });
}
//表单数据
const exposeForm = ref({});
//获取详细信息
function getExposeInfo() {
  exposeInfo(exposeId.value).then((res) => {
    exposeForm.value = res.data;
  });
}
//时间格式化方法
function dateFormat(data) {
  return moment.unix(data).format("YYYY-MM-DD HH:mm:ss");
}
const editor = ref(null);
onMounted(() => {
  exposeId.value = route.query.id;
  getExposeInfo();
});
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 220px);
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  padding: 20px;
  overflow-y: auto;
  .el-form {
    padding: 20px;
  }
}
</style>
